<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-main g-main">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>积分类型</th>
                    <th>积分原因</th>
                    <th>积分值</th>
                    <th>创建时间</th>
                </tr>
                </thead>

                <tbody>
                <!--存放数据-->
                </tbody>

            </table>
            <div id="page"></div>
        </div>
    </div>
</div>

<!--<table id="demo" lay-filter="test"></table>-->
<!--<div id="paging">-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<script>
    //初始化
    var total
    showRecord(1,10)

    //前端分页框架
    layui.use('laypage',function () {
        var laypage=layui.laypage,$=layui.$//这句什么意思？？？
        laypage.render({
            elem:'page'
            ,count:total//只能通过服务端获取了             //数据总数
            ,limit:10
            ,limits:[10,20,30]              //每页数据数
            ,curr:1//起始页为1
            , groups: 5                     //连续页码个数
            , prev: '上一页'                 //上一页文本
            , netx: '下一页'                 //下一页文本
            , first: 1                      //首页文本
            , layout: ['prev', 'page', 'next','limit','refresh','skip']
            ,jump:function (obj,first) {
                if(!first){
                    //清空当前加载的数据
                    $('tbody').empty();
                    //调用加载函数加载数据
                    showRecord(obj.curr,obj.limit)
                }
            }
        })
    });


    //获取每页的数据
    function showRecord(pageNo,pageSize) {
        $.ajax({
            type:"post"
            ,url:"/studentadminsystem/ListStudentServlet2"
            ,data:{
                pageNo:pageNo
                ,pageSize:pageSize
            }
            ,async:false
            ,cache: true
            ,success:function (data) {
                //判断是否为json格式
                if((typeof data=='object')&&data.constructor==Object){
                    obj=data;
                }else{
                    obj  = eval("("+data+")");
                }

                total=obj.totalRecords
                for (var i = 0; i < obj.data.length; i++) {
                    var td = $("<td></td>").text(obj.data[i].stuNo);
                    var td2 = $("<td></td>").text(obj.data[i].stuName);
                    var td3 = $("<td></td>").text(obj.data[i].classes);
                    var td4 = $("<td></td>").text(obj.data[i].gender);
                    var tr = $("<tr></tr>").append(td, td2, td3, td4);
                    $('tbody').append(tr);
                }
            }

        })
    }



    // function gettotalRecords() {
    //     var a;
    //     $.ajax({
    //         type:"post"
    //         ,url:"/studentadminsystem/ListStudentServlet2"
    //         ,data:{
    //             pageNo:1
    //             ,pageSize:1
    //         }
    //         ,async:false
    //         ,cache: true
    //         ,success:function (data) {
    //             alert("AAA"+data)
    //             var obj
    //             //判断是否是json格式
    //             if((typeof data=='object')&&data.constructor==Object){
    //                 obj=data;
    //             }else{
    //                 obj  = eval("("+data+")");
    //             }
    //             alert("CCC"+obj)
    //             alert("DDD"+obj.totalRecords)
    //             a=obj.totalRecords
    //             //total=obj.totalRecords
    //         }
    //     })
    //     alert("EEE"+a)
    // }

    // layui.use('table', function(){
    //     var table = layui.table;
    //
    //     //第一个实例
    //     table.render({
    //         elem: '#demo'
    //         ,height: 312
    //         ,limit:10
    //         ,url: '/studentadminsystem/ListStudentServlet2' //数据接口
    //         ,method:'POST'
    //         ,page: true //开启分页
    //         ,cols: [[ //表头
    //             {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
    //             ,{field: 'username', title: '用户名', width:80}
    //             ,{field: 'sex', title: '性别', width:80, sort: true}
    //             ,{field: 'city', title: '城市', width:80}
    //             ,{field: 'sign', title: '签名', width: 177}
    //             ,{field: 'experience', title: '积分', width: 80, sort: true}
    //             ,{field: 'score', title: '评分', width: 80, sort: true}
    //             ,{field: 'classify', title: '职业', width: 80}
    //             ,{field: 'wealth', title: '财富', width: 135, sort: true}
    //         ]]
    //         ,parseData:function (res) {
    //             return{
    //                 "code":res.code,
    //                 "msg":res.msg,
    //                 "count":res.data.total,
    //                 "data":res.data.data
    //             }
    //         }
    //     });
    //
    // });
</script>
</body>
</html>